<template>
  <div id="app">
    <!-- <mainNav/> -->
    <transition mode="out-in" :name="transtionSlide" 
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition mode="out-in" :name="transtionSlide" 
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>
// import mainNav from "@/components/mainNav.vue";
import { mapActions, mapState } from "vuex";
export default {
  name: "App",
  components: {
    // mainNav
  },
  data() {
    return {
      transtionSlide: "slide-left",
      userInfo: {
        userName: "",
        password: "",
        uuid: "",
        token: ""
      }
    };
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      this.transtionSlide = toDepth < fromDepth ? "slide-right" : "slide-left";
    }
  },
  computed: {
    ...mapState(["isLogin"])
  },
  methods: {
    ...mapActions(["loginAction", "userInfoAction"])
  },
  created() {
    document.body.removeChild(document.getElementById("loading"));
    let app_keys_a = [];
    // console.log(this.$cookies.getCookie("app_rizhi_"));
    let app_cookie_rizhi = this.$cookies.getCookie("app_rizhi_");
    app_cookie_rizhi = app_cookie_rizhi == undefined ? "" : app_cookie_rizhi;
    let app_cookie_key = app_cookie_rizhi.split("&");
    app_cookie_key.forEach(value => {
      app_keys_a.push(value.split("=")[1]);
    });
    // console.log(app_keys_a[0], app_keys_a[1], app_keys_a[2], app_keys_a[3]);
    let appSignMd5 = this.$md5(
      this.$appKeyWords.app_key +
        "App.User.Check" +
        app_keys_a[1] +
        "" +
        app_keys_a[0] +
        this.$appKeyWords.app_secret
    ).toUpperCase();
    this.$axios
      .post(
        "/api/?s=App.User.Check&uuid=" +
          app_keys_a[0] +
          "&token=" +
          app_keys_a[1] +
          "&app_key=" +
          this.$appKeyWords.app_key +
          "&sign=" +
          appSignMd5
      )
      .then(data => {
        if (data.status === 200 && data.data.data.err_code === 0) {
          this.loginAction(1);
          this.userInfo.userName = app_keys_a[2];
          this.userInfo.password = app_keys_a[3];
          this.userInfo.uuid = app_keys_a[0];
          this.userInfo.token = app_keys_a[1];
          this.userInfoAction(this.userInfo);
          // this.$router.push({ path: "/" });
          // console.log(this.$store.state);
        } else {
          return;
        }
      })
      .catch(error => {
        self.fetchError = error;
      });
  },
  mounted() {
    // console.log(this.$cookies.getCookie("app_rizhi_"));
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
}
</style>
